<!DOCTYPE html>
<html>
<head>
    <title>设置分类</title>
    {% include 'system/common/header.html' %}
</head>
<body class="pear-container">
    <!-- 数据表格 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="category-table" lay-filter="category-table"></table>
        </div>
    </div>

    <!-- 表格工具栏 -->
    <script type="text/html" id="category-toolbar">
        
        <div class="layui-btn-container">
            {% if authorize("system:iptvadmin:add") %}
            <button class="pear-btn pear-btn-primary pear-btn-sm" id="addCategory">
                <i class="layui-icon layui-icon-add-1"></i>新增分类
            </button>
            {% endif %}
        </div>
        
    </script>

    <!-- 行工具栏 -->
    <script type="text/html" id="category-bar">
        {% if authorize("system:iptvadmin:edit") %}
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
        {% endif %}
        {% if authorize("system:iptvadmin:remove") %}
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
        {% endif %}
    </script>

    <!-- 添加/编辑分类弹窗 -->
    <script type="text/html" id="category-form">
        <form class="layui-form" action="" lay-filter="category-form" style="margin: 20px;">
            <div class="mainBox">
                <div class="main-container">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="id">
                            <input type="text" name="name" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input type="number" name="sort" value="0" lay-verify="required|number" placeholder="请输入排序号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="button-container">
                    <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit lay-filter="category-submit">
                        <i class="layui-icon layui-icon-ok"></i>
                        提交
                    </button>
                    <button type="reset" class="pear-btn pear-btn-sm">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </script>

    {% include 'system/common/footer.html' %}
    <script>
        layui.use(['table', 'form', 'jquery'], function() {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;

            let MODULE_PATH = "/iptvadmin/";

            // 渲染表格
            table.render({
                elem: '#category-table',
                url: MODULE_PATH + 'category/query',
                page: true,
                cols: [[
                    // {type: 'numbers'},
                    {field: 'id', title: 'ID', sort: true},
                    {field: 'name', title: '分类名称'},
                    {field: 'sort', title: '排序', sort: true, edit: 'text'},
                    {field: 'create_time', title: '创建时间'},
                    {title: '操作', toolbar: '#category-bar', align: 'center', width: 130}
                ]],
                skin: 'line',
                toolbar: '#category-toolbar',
                defaultToolbar: [{
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            });

            // 新增分类按钮点击事件
            $('#addCategory').click(function() {
                showCategoryForm();
                return false;
            });

            // 监听行工具事件
            table.on('tool(category-table)', function(obj) {
                if (obj.event === 'edit') {
                    showCategoryForm(obj.data);
                } else if (obj.event === 'remove') {
                    layer.confirm('确定要删除该分类吗？', {
                        icon: 3,
                        title: '提示'
                    }, function(index) {
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: MODULE_PATH + 'category/remove',
                            data: {id: obj.data.id},
                            type: 'post',
                            success: function(result) {
                                layer.close(loading);
                                if (result.success) {
                                    layer.msg(result.msg, {
                                        icon: 1,
                                        time: 1000
                                    }, function() {
                                        obj.del();
                                    });
                                } else {
                                    layer.msg(result.msg, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        });
                    });
                }
            });

            // 监听单元格编辑
            table.on('edit(category-table)', function(obj){
                let value = obj.value,
                    data = obj.data;
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + 'category/update',
                    data: JSON.stringify({
                        id: data.id,
                        sort: value
                    }),
                    contentType: 'application/json',
                    type: 'put',
                    success: function(result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            });
                            table.reload('category-table');
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                });
            });

            // 显示分类表单
            function showCategoryForm(data) {
                layer.open({
                    type: 1,
                    title: data ? '编辑分类' : '新增分类',
                    content: $('#category-form').html(),
                    area: ['500px', '300px'],
                    success: function(layero, index) {
                        form.render();
                        if (data) {
                            form.val('category-form', data);
                        }
                        
                        // 监听提交
                        form.on('submit(category-submit)', function(formData) {
                            let loading = layer.load();
                            $.ajax({
                                url: MODULE_PATH + 'category/' + (data ? 'update' : 'save'),
                                data: JSON.stringify(formData.field),
                                contentType: 'application/json',
                                type: data ? 'put' : 'post',
                                success: function(result) {
                                    layer.close(loading);
                                    if (result.success) {
                                        layer.msg(result.msg, {
                                            icon: 1,
                                            time: 1000
                                        }, function() {
                                            layer.close(index);
                                            table.reload('category-table');
                                        });
                                    } else {
                                        layer.msg(result.msg, {
                                            icon: 2,
                                            time: 1000
                                        });
                                    }
                                }
                            });
                            return false;
                        });
                    }
                });
            }

            // 工具栏事件
            table.on('toolbar(category-table)', function(obj) {
                if (obj.event === 'refresh') {
                    window.refresh();
                }
            });

            // 刷新表格
            window.refresh = function() {
                table.reload('category-table');
            }
        });
    </script>
</body>
</html>